<template>
    <div class="account-info-box" v-loading="loading">
        <div class="account-info-top">
            <img :src="item.roleIcon" alt="">
            <div class="info">
                <ul>
                    <li>
                        <p class="info-title">游戏昵称：</p>
                        <p class="info-con">{{ item.roleName }}</p>
                    </li>
                    <li>
                        <p class="info-title">信誉积分：</p>
                        <p class="info-con">{{ item.credit }}</p>
                    </li>
                    <li>
                        <p class="info-title">段位：</p>
                        <p class="info-con">{{ item.roleJob }}</p>
                    </li>
                    <li>
                        <p class="info-title">最高价值：</p>
                        <p class="info-con">{{ item.maxDiamond }}</p>
                    </li>
                    <li>
                        <p class="info-title">英雄数：</p>
                        <p class="info-con">{{ item.heroSize }}</p>
                    </li>
                    <li>
                        <p class="info-title">皮肤数：</p>
                        <p class="info-con">{{ item.skinSize || 0 }}</p>
                    </li>
                    <li>
                        <p class="info-title">首次托管时间：</p>
                        <p class="info-con" v-if="item.createTime">{{ _formatDate(item.createTime) }}</p>
                        <p class="info-con" v-else>暂无托管记录</p>
                    </li>
                    <li>
                        <p class="info-title">托管状态：</p>
                        <p class="info-con" style="color: rgb(103, 194, 58);" v-if="item.manageStatus">已托管</p>
                        <p class="info-con" v-else>未托管</p>
                    </li>
                </ul>
                <div style="margin-top: 10px;">
                    <span class="info-title">价值标签：</span>
                    <span v-for="(item, index) in item.diamondList" :key="index" class="info-con"><i v-if="index > 0">, </i>{{ item }}</span>
                    <span v-if="item.diamondList.length === 0">无</span>
                </div>
                <div class="skin-list">
                    <span class="info-title">皮肤：</span>
                    <p class="skin-list-con" :class="{ 'skin-list-hidden': skinWidth > 800 && !isShowMore }">
                        <span v-for="(item, index) in item.skinList" :key="index" class="info-con">
                            <i v-if="index > 0">, </i>{{ item }}
                        </span>
                        <span v-if="item.skinList.length === 0">无</span>
                    </p>
                    <span class="skin-list-more" v-if="skinWidth > 800 && !isShowMore" @click="isShowMore = true">查看全部</span>
                    <span class="skin-list-more" v-if="isShowMore" @click="isShowMore = false">隐藏</span>
                </div>
            </div>
            <!-- <div>
                <p class="info-con" style="margin-top: 0px;">首次托管时间：{{ _formatDate(item.createTime) }}</p>
            </div> -->
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    props: {
        item: {}
    },
    data () {
        return {
            skinWidth: '',
            isShowMore: false,
            loading: false
        }
    },
    mounted () {
        this.skinWidth = document.getElementsByClassName('skin-list')[0].clientWidth
        console.log(this.skinWidth)
    },
    methods: {
        _formatDate (timestamp) {
            return formatDate(timestamp, 'YYYY-MM-DD HH:MM')
        }
    }
}
</script>

<style lang="scss" scoped>
    .account-info-top {
        display: flex;
        .info {
            flex: 1;
            margin: 0 20px;
            ul {
                display: flex;
                width: 100%;
                justify-content: space-between;
            }
            .skin-list {
                position: relative;
                display: flex;
                flex-direction: row;
                align-items: top;
                margin-top: 10px;
                .info-title {
                    line-height: 24px;
                }
            }
            .skin-list-con {
                flex: 1;
            }
            .skin-list-hidden {
                max-width: 800px;
                line-height: 24px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
            .skin-list-more {
                line-height: 26px;
                font-size: 14px;
                color: #66b1ff;
                cursor: pointer;
            }
        }
        img {
            display: inline-block;
            width: 92px;
            height: 92px;
            border-radius: 50%;
        }
    }
    .account-info-bottom {
        margin-top: 10px;
    }
    .info-title {
        font-size: 12px;
        color: #9ba0b1;
        font-weight: 600;
    }
    .info-con {
        margin-top: 5px;
        font-size: 14px;
        color: #393939;
        font-weight: 500;
    }
</style>
